<template>
  <div>
     <Wrap>
       <div slot="main_wrap">
         <div class="form-inline form-find ng-pristine ng-valid">
            <div class="form-group">
								<label>项目名称：</label>
						</div>
						<div class="form-group" style="min-width:200px">
              <!-- <avue-input-tree v-model="form2" placeholder="请选择内容" :append-to-body="false" type="tree" :dic="dic"></avue-input-tree> -->
              <el-select class="form-control " v-model="form1" :popper-append-to-body="false">
                  <el-option value="0" label="广东省税务局"><span>广东省税务局</span></el-option>
                </el-select>
            </div>
            <div class="form-group">
              <label>建筑名称：</label>
              <div class="form-group-control">
                <el-select class="form-control " v-model="form2" :popper-append-to-body="false">
                  <el-option value="0" label="潭村办公楼"><span>潭村办公楼</span></el-option>
                </el-select>
              </div>
            </div>
            <!-- <div class="form-group">
              <label>数据分析：</label>
              <div class="form-group-control">
                <el-select v-model="select2" class="form-control select-type" :popper-append-to-body="false">
                  <el-option value="1" label="分类">分类</el-option>
                  <el-option value="2" label="分项">分项</el-option>
                  <el-option value="3" label="支路">支路</el-option>
                  <el-option value="4" label="仪表">仪表</el-option>
                  <el-option value="5" label="电站">电站</el-option>
                </el-select>
                <el-select v-model="select3" class="form-control select-type" :popper-append-to-body="false" v-if="select2 === '1' || select2 === '2'">
                  <el-option value="1" label="电">电</el-option>
                  <el-option value="2" label="水">水</el-option>
                  <el-option value="3" label="集中供热量">集中供热量</el-option>
                  <el-option value="4" label="集中供冷量">集中供冷量</el-option>
                </el-select>
                <el-select v-model="select4" class="form-control select-type" :popper-append-to-body="false" v-if="select2 === '2'" multiple>
                  <el-option value="1" label="照明插座用电">照明插座用电</el-option>
                  <el-option value="2" label="空调用电">空调用电</el-option>
                  <el-option value="3" label="动力用电">动力用电</el-option>
                  <el-option value="4" label="特殊用电">特殊用电</el-option>
                </el-select>
              </div>
            </div>
            <div class="form-group" v-if="select2 === '3'">
              <label>用能支路：</label>
              <div class="form-group-control">
                <el-select v-model="select5" class="form-control select-type" :popper-append-to-body="false">
                  <el-option value="1" label="东区空调机房设备用电">东区空调机房设备用电</el-option>
                  <el-option value="2" label="西区空调机房设备用电">西区空调机房设备用电</el-option>
                  <el-option value="3" label="厨房餐厅总用水">厨房餐厅总用水</el-option>
                  <el-option value="4" label="厨房餐厅总用电">厨房餐厅总用电</el-option>
                  <el-option value="5" label="东区空调机房设备用电1">东区空调机房设备用电1</el-option>
                  <el-option value="6" label="中水回收">中水回收</el-option>
                </el-select>
              </div>
            </div>
            <div class="form-group" v-if="select2 === '4'">
              <label>用能仪表：</label>
              <div class="form-group-control">
                 <avue-input-tree v-model="select6" placeholder="请选择内容" :append-to-body="false" type="tree" :dic="dic"></avue-input-tree>
              </div>
            </div>
            <div class="form-group" v-if="select2 === '5'">
              <label>光伏电站：</label>
              <div class="form-group-control">
                <el-select v-model="select7" class="form-control select-type" :popper-append-to-body="false">
                  <el-option value="1" label="东区空调机房设备用电">东区空调机房设备用电</el-option>
                  <el-option value="2" label="西区空调机房设备用电">西区空调机房设备用电</el-option>
                </el-select>
              </div>
            </div>
             <div class="form-group">
              <label>时间周期：</label>
              <div class="form-group-control">
                <el-select v-model="select8" class="form-control select-type" :popper-append-to-body="false" @change="changeDateType">
                  <el-option value="1" label="小时">小时</el-option>
                  <el-option value="2" label="天">天</el-option>
                  <el-option value="3" label="月">月</el-option>
                  <el-option value="4" label="年">年</el-option>
                </el-select>
              </div>
            </div>
             <div class="form-group">
              <label>时段类型：</label>
              <div class="form-group-control">
                <el-select v-model="select9" class="form-control select-type" :popper-append-to-body="false">
                  <el-option value="1" label="全部时段">全部时段</el-option>
                  <el-option value="2" label="节假日">节假日</el-option>
                  <el-option value="3" label="午休时段">午休时段</el-option>
                  <el-option value="4" label="夜间时段">夜间时段</el-option>
                  <el-option value="5" label="夜间时段2">夜间时段2</el-option>
                  <el-option value="6" label="夜间时段3">夜间时段3</el-option>
                  <el-option value="7" label="夜间时段4">夜间时段4</el-option>
                  <el-option value="8" label="夜间时段5">夜间时段5</el-option>
                </el-select>
              </div>
            </div> -->
             <div class="form-group">
              <label>时间周期：</label>
              <div class="form-group-control">
                <el-select v-model="params.period" @change="changeDateType" class="form-control select-type" :popper-append-to-body="false">
                  <el-option v-for="item in options1"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
             <div class="form-group">
              <label>开始时间：</label>
              <div class="form-group-control">
                 <el-date-picker
                    v-model="params.startDate"
                    :value-format="formatDate"
                    :type="typedate">
                  </el-date-picker>
              </div>
            </div>
             <div class="form-group">
              <label>结束时间：</label>
              <div class="form-group-control">
                 <el-date-picker
                    v-model="params.endDate"
                    :value-format="formatDate"
                    :type="typedate">
                  </el-date-picker>
              </div>
            </div>
            <div class="form-group">
              <label>用能分类：</label>
              <div class="form-group-control">
                 <el-select v-model="params.energyUseType" class="form-control select-type" :popper-append-to-body="false">
                  <el-option v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="form-group">
              <a class="btn btn-primary btn-sm" role="button" @click="yestoday">昨日</a>
              <a class="btn btn-sm btn-primary" role="button" @click="totoday">今日</a>
               <a class="btn btn-sm btn-primary" role="button" @click="getData">搜索</a>
              <!-- <a class="btn btn-sm btn-primary" role="button" ng-click="go('platform.realtimereadingtable')" access-field="goMeterReadingList">总体耗能</a>
              <a class="btn btn-sm btn-primary" role="button" ng-click="toHourlyEnergy()" access-field="goHourlyenergytrend">导出</a> -->
            </div>
         </div>
         <div class="analyze-content">
          <div id="bar" class="chart-border">
              <v-chart :options="chartParams1" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />                  
          </div>
          <div class="chart-border-right chart-border">
              <v-chart :options="chartParams2" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />                    
          </div>
          <table class="table table-striped table-bordered table-hover" v-for="item in dataList">
            <thead>
              <tr>
                  <th class="ng-binding">分类分项名称</th>
                  <th width="0.5px;" class="ng-scope" v-for="citem in item">
                      <span class="ng-binding">{{citem.date}}</span>
                  </th>
              </tr>
            </thead>
            <tbody>
              <tr data-ng-repeat="body in tableData.body track by $index" class="ng-scope">
                  <td class="ng-binding" width="150">{{tableHeader}}</td>
                  <td class="text-center ng-binding ng-scope" v-for="citem in item">
                      {{citem.quantity}}
                  </td>
              </tr>
            </tbody> 
          </table>
         </div>
       </div>
     </Wrap>
  </div>
</template>

<script type="text/ecmascript-6">
import Wrap from '@/components/energy-wrap'
import {getCurrentDate, getCurrentDateNago, getMonthFirstDate, getMonthLastDate} from '@/util/date'
import {accAdd} from '@/util/util'
import { remote } from "@/api/admin/dict";
import { energyUseData } from '@/api/energy/energy'
const option1 = {
  color: ['#588dd5'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 90,
    right: 50,
    bottom: 60,
    top: 60
  },
  legend: {
    top: 20,
    itemWidth: 20,
    itemHeight:10,
    textStyle: {
      color: '#fff'
    },
    data: []
  },
  xAxis: {
    type: 'category',
    // data: ['2021-10', '2021-11','2021-12','2022-01','2022-02','2022-03',],
    data: [],
    axisLine: {
      show: true,
      lineStyle:{
        color: '#008acd',
        width: 2
      }
    },
    axisTick: {
      show:false
    },
    axisLabel: {
      show: true,
      color: '#fff',
      rotate: 30
    }
  },
  yAxis: {
    type: 'value',
    // interval: 10,
    axisLine: {
      show: true,
      lineStyle:{
        color: '#008acd',
        width: 2
      }
    },
    axisLabel: {
      color: '#fff',
      formatter: '{value}'
    },
    axisTick: {
      show:false
    },
    splitLine: {
      show:false
    }
  },
  series: [{
    name: '',
    data: [31.64, 17.88, 14.07, 12.14, 9.7, 0],
    type: 'bar',
    itemStyle: {
      normal: {
        lineStyle: {
          width: 3// 设置线条粗细
        },
        barBorderRadius: 6
      }
    },
  }]
}
const option2 = {
  title: {
    text: '分项占比',
    textStyle:{ 
      color: '#fff',
      fontSize: 15
    },
  },
  color: ['#588dd5', '#639871', '#c05050', '#ffb980','#00bfbc', '#0063bf', '#03bf4e', '#0081f4'],
  tooltip: {
    trigger: 'item',
     formatter: function (params) {
      let res = '<p style="color: #fff;margin-bottom: 0">' + params.name + '</p><p style="color: #fff;margin-bottom: 0">' + params.value + '(' + params.percent + '%)</p>'
      return res
    }
  },
  // legend: {
  //   orient: 'vertical',
  //   left: 'right',
  //   top: 40,
  //   align: 'left',
  //   textStyle:{
  //     color: '#3258a2'
  //   }
  // },
  series: [
    {
      type: 'pie',
      radius: '85%',
      center: ['50%', '50%'],
      left: 0,
      top: 10,
      avoidLabelOverlap: true,
      // right: 80,
      label: {
            normal: {
                textStyle: {
                    fontSize: '14',                  
                }
            },                
        },
      labelLine: {
        length:3,                
        length2: 30,                
      },
      data: [
        { value: 17690776, name: '特殊用电' },
        { value: 18351432, name: '照明插座用电' },
        { value: 24483229, name: '空调用电' },
        { value: 6560480, name: '动力用电' }
      ]
    }
  ]
}
export default {
  components: {
    Wrap
  },
  data () {
    return {
      form2:'0',
      form1: '0',
      typedate: 'date',
      formatDate: 'yyyy-MM-dd',
      dataList: [
        // [
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   }
        // ],
        // [
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '2022-03-05 00:00:00',
        //     count: '93.7000',
        //   },
        //   {
        //     date: '总计',
        //     count: '93151561.7000',
        //   }
        // ]
      ],
      tableHeader: '总用电量(kWh)',
      options: [],
      options1: [],
      chartParams1: {},
      chartParams2: {},
      active: true,
      select2: '3',
      select1: '1',
      select3: '',
      select4: '',
      select5: '',
      select6: '',
      select7: '',
      select8: '',
      select9: '',
      params: {
        startDate: getCurrentDateNago(7),
        endDate: getCurrentDate('year'),
        period: '2',
        energyUseType: '1'
      },
       dic:[{
          label:'广东省税务局',
          value:0,
          // children:[{
          //    label:'选项3',
          //    value:2
          // },{
          //    label:'选项4',
          //    value:3
          // }]
        // },{
        //   label:'选项2',
        //   value:1
        }]
    }
  },
  created() {
    this.getData()
    remote('energy_use_type').then(response => {
      this.options = response.data.data
    })
    remote('energy_statistic_period').then(response => {
      this.options1 = response.data.data
    })
  },
  methods: {
    yestoday() {
      this.params.startDate = this.params.endDate = getCurrentDateNago(1)
      this.getData()
    },
    totoday() {
      this.params.startDate = this.params.endDate = getCurrentDate('year')
      this.getData()
    },
    getData() {
      let self = this
      if (this.params.energyUseType == '1') {
        this.tableHeader = '总用电量(kWh)'
        option1.legend.data = option1.series[0].name = ['电']
      } else if (this.params.energyUseType == '2') {
        this.tableHeader = '总用水量(吨)'
        option1.legend.data = option1.series[0].name = ['水']
      } else if (this.params.energyUseType == '3') {
        this.tableHeader = '总用气量(Nm³)'
        option1.legend.data = option1.series[0].name = ['气']
      } else if (this.params.energyUseType == '4') {
        this.tableHeader = '总用汽油量(L)'
        option1.legend.data = option1.series[0].name = ['汽油']
      }
      if (this.params.period == '3') {
        this.params.startDate = getMonthFirstDate('year', this.params.startDate)
        this.params.endDate = getMonthLastDate(this.params.endDate)
      } else if (this.params.period == '4') {
        this.params.startDate = new Date(this.params.startDate).getFullYear() + '-01-01'
        this.params.endDate = new Date(this.params.endDate).getFullYear() + '-12-31'
      }
      energyUseData(this.params).then(res => {
        option2.series[0].data = res.data.data.pieChart
        option1.xAxis.data = res.data.data.electricData.map(item => {
          return item.date
        })
        let quList = []
        option1.series[0].data = res.data.data.electricData.map(item => {
          return item.quantity
        })
        self.dataList = []
        let n = 10
        for(let i = 0;i < res.data.data.electricData.length; i+=n) {
          self.dataList.push(res.data.data.electricData.slice(i, i+n))
        }
        let sum = option1.series[0].data.reduce((pre, cur) => {
          return accAdd(pre, cur)
        })
        sum = sum ? sum.toFixed(2) : 0
        self.dataList[self.dataList.length - 1].push({
            date: '总计',
            quantity: sum,
        })
        this.chartParams2 = Object.assign({}, option2)
        this.chartParams1 = Object.assign({}, option1)
      })
    },  
    changeDateType(value) {
      if (value == '1' || value == '2') {
        this.typedate = 'date'
      } else if(value == '3') {
        this.typedate = 'month'
      } else if(value == '4') {
        this.typedate = 'year'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.analyze-content{
  #bar{
    height: 360px;
    width: 66%;
    float: left;
    margin-bottom: 10px;
  }
  .chart-border-right{
    width: 34%;
    float: left;
    height: 360px;
    margin-bottom: 10px;
  }
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border: 1px solid rgb(10, 57, 98);
}
.form-find {
    padding: 20px;
    background-color: #081325;
    box-shadow: inset 0px 1px 13px 0px #1AABF3;
    border: solid 1px rgba(15, 80, 111, 0.55);
    margin-bottom: 10px;
   .form-group {
        margin-right: 3px;
        margin-bottom: 3px;
    }
}
.reading-row {
    line-height: 25px;
    margin-right: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid #0a91ef;
    overflow: hidden;
    .el-icon-circle-check {
      color: green;
    }
    .icon {
        font-size: 23px;
        vertical-align: middle;
    }
}
.outline-border {
    border: 1px solid #ddd;
    color:#fff;
    padding: 5px;
    .total-count {
        color: #0371F7;
        text-decoration: underline;
        font-weight: bold;
    }
    .abnormal-rate {
        color: red;
        font-weight: bold;
    }
}
.list-content{
  height: 475px;
  overflow-y: auto;
  margin-top: 10px;
  .device-reading {
    float: left;
  }
}
.form-inline label {
    margin-right: 7px;
}
.form-group-control {
    display: inline-block;
    vertical-align: middle;
}
.nav-tabs {
    margin-bottom: 15px;
    &>li.active,&>li:hover {
      background-color: transparent;
    }
}
@media (min-width: 768px){
  .form-inline .form-group {
      display: inline-block;
      vertical-align: middle;
  }
}
</style>
